<template>
	<view style="position: relative;padding-bottom: 70rpx;">
		<view style="display: flex;justify-content: space-between;">
			<text>
				选择到店时间
			</text>
			<text style="font-size: 24rpx;color:darkgray;margin-top: 4rpx;">{{lasttcobj.time}} {{lasttcobj.minute}}</text>
			<br />
			<text @click="next('anthertime')" style="color: silver;margin-right: 60rpx;font-size: 26rpx;">
				查看其他日期
			</text>
		</view>
		<view style="display: flex; justify-content: space-between;margin: 30rpx 0rpx;">
			<view @click="()=>{
				activetime=index
				settcobj({...lasttcobj,...{time:new Date().getFullYear()+'-'+formattedDates[index]}})
			}" :class="lasttcobj.time===new Date().getFullYear()+'-'+formattedDates[index]?'activeday':'timebox'" v-for="(item,index) in daylist" :key="index">
				<text>{{item}}</text>
				<text>{{formattedDates[index]}}</text>
			</view>
		</view>
		<view style="display: flex; justify-content: space-between;flex-wrap: wrap;margin-bottom: 40rpx;">
			<view @click="()=>{
				activefenmiao=index
				settcobj({...lasttcobj,...{minute:timelist[activefenmiao]}})
			}" style="margin: 15rpx;" v-for="(item,index) in timelist" :key="index">
				<button :class="lasttcobj.minute===timelist[index]?'activefenmiao':''" style="width: 200rpx;font-size: 26rpx;">{{item}}</button>
			</view>
		</view>

		<button class="yuyue" @click="next('submit')">立即预约</button>
	</view>
	
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue'
import { func } from '../../uni_modules/uview-plus/libs/function/test';
	defineProps(['next','lasttcobj','settcobj'])
	let daylist = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
	let today= new Date()
	let activetime = ref(0)
	let activefenmiao = ref('')
	let newlist = daylist.splice(today.getDay(), daylist.length)
	daylist = [...newlist, ...daylist]
	daylist[0]='今天'
	daylist[1]='明天'
	let nowmonth=today.getMonth()+1
	let nowdate=today.getDate()

	
	// 初始化一个空数组来存储未来七天的日期
	const futureDates = [];
	
	// 循环获取未来七天的日期
	for (let i = 0; i < 7; i++) {
	  const futureDate = new Date(today);
	  futureDate.setDate(today.getDate() + i);
	  futureDates.push(futureDate);
	}
	
	// 格式化日期为 YYYY-MM-DD 格式
	const formattedDates = futureDates.map(date => {
	  const month = String(date.getMonth() + 1)
	  const day = String(date.getDate())
	  return `${month}-${day}`;
	});
	
	console.log(formattedDates[activetime.value])
	let timelist=['10:00','10:20','10:40','11:00','11:20','11:40','12:00','12:20'
	,'12:40','13:00','13:20','13:40','14:00','14:20','14:40','15:00','15:20','15:40','16:00','16:20','16:40']
</script>

<style>
	.timebox{
		line-height: 45rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.activefenmiao{
		background: peachpuff;
		color: white;
	}
	.activeday{
		color: orange;
		line-height: 45rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.yuyue{
			background: orange;
			border-radius: 50rpx;
			width: 50%;
			color: white;
			position: absolute;
			bottom: 0rpx;
			left: 180rpx;
		}
		.yuyue:active{
			color: silver;
		}
</style>